<template>
  <div class="profile-info">
    <van-nav-bar
      title="个人信息"
      left-text="返回"
      right-text="保存"
      left-arrow
      @click-left="$router.go(-1)"
      @click-right="saveProfile"
    />
    
    <div class="form-container">
      <!-- 头像 -->
      <van-cell title="头像" is-link @click="showAvatarPicker = true">
        <template #value>
          <van-image
            class="avatar"
            :src="form.avatar || '/default-avatar.png'"
            round
            width="50"
            height="50"
          />
        </template>
      </van-cell>
      
      <!-- 基本信息 -->
      <van-field
        v-model="form.nickname"
        label="昵称"
        placeholder="请输入昵称"
        required
        :rules="[{ required: true, message: '请输入昵称' }]"
      />
      
      <van-field
        v-model="form.realName"
        label="真实姓名"
        placeholder="请输入真实姓名"
      />
      
      <van-field
        v-model="form.phone"
        label="手机号"
        placeholder="请输入手机号"
        type="tel"
        readonly
      />
      
      <van-field
        v-model="form.email"
        label="邮箱"
        placeholder="请输入邮箱"
        type="email"
      />
      
      <van-field
        v-model="form.gender"
        label="性别"
        placeholder="请选择性别"
        readonly
        is-link
        @click="showGenderPicker = true"
      />
      
      <van-field
        v-model="form.birthday"
        label="生日"
        placeholder="请选择生日"
        readonly
        is-link
        @click="showDatePicker = true"
      />
      
      <van-field
        v-model="form.location"
        label="所在地"
        placeholder="请输入所在地"
      />
      
      <van-field
        v-model="form.profession"
        label="职业"
        placeholder="请输入职业"
      />
      
      <van-field
        v-model="form.bio"
        type="textarea"
        label="个人简介"
        placeholder="介绍一下自己吧..."
        rows="3"
        maxlength="200"
        show-word-limit
      />
      
      <!-- 隐私设置 -->
      <van-cell-group title="隐私设置">
        <van-cell title="允许陌生人查看我的资料">
          <template #right-icon>
            <van-switch v-model="form.allowStrangerView" />
          </template>
        </van-cell>
        
        <van-cell title="允许他人看到我的在线状态">
          <template #right-icon>
            <van-switch v-model="form.showOnlineStatus" />
          </template>
        </van-cell>
        
        <van-cell title="接收系统通知">
          <template #right-icon>
            <van-switch v-model="form.receiveNotification" />
          </template>
        </van-cell>
      </van-cell-group>
      
      <!-- 账号安全 -->
      <van-cell-group title="账号安全">
        <van-cell title="修改密码" is-link @click="goToChangePassword" />
        <van-cell title="绑定邮箱" is-link @click="goToBindEmail" />
        <van-cell title="实名认证" is-link @click="goToRealNameAuth">
          <template #value>
            <van-tag v-if="form.isRealNameAuth" type="success">已认证</van-tag>
            <van-tag v-else type="warning">未认证</van-tag>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
    
    <!-- 头像选择器 -->
    <van-action-sheet
      v-model:show="showAvatarPicker"
      :actions="avatarActions"
      @select="onAvatarSelect"
    />
    
    <!-- 性别选择器 -->
    <van-popup v-model:show="showGenderPicker" position="bottom">
      <van-picker
        :columns="genderColumns"
        @confirm="onGenderConfirm"
        @cancel="showGenderPicker = false"
      />
    </van-popup>
    
    <!-- 日期选择器 -->
    <van-popup v-model:show="showDatePicker" position="bottom">
      <van-date-picker
        v-model="currentDate"
        @confirm="onDateConfirm"
        @cancel="showDatePicker = false"
      />
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'ProfileInfo',
  data() {
    return {
      form: {
        avatar: '',
        nickname: '',
        realName: '',
        phone: '',
        email: '',
        gender: '',
        birthday: '',
        location: '',
        profession: '',
        bio: '',
        allowStrangerView: true,
        showOnlineStatus: true,
        receiveNotification: true,
        isRealNameAuth: false
      },
      showAvatarPicker: false,
      showGenderPicker: false,
      showDatePicker: false,
      currentDate: new Date(),
      avatarActions: [
        { name: '拍照', value: 'camera' },
        { name: '从相册选择', value: 'album' }
      ],
      genderColumns: [
        { text: '男', value: '男' },
        { text: '女', value: '女' },
        { text: '保密', value: '保密' }
      ]
    }
  },
  created() {
    this.loadUserInfo()
  },
  methods: {
    loadUserInfo() {
      // 模拟加载用户信息
      this.form = {
        avatar: '',
        nickname: '用户123',
        realName: '',
        phone: '138****8888',
        email: '',
        gender: '保密',
        birthday: '',
        location: '',
        profession: '',
        bio: '',
        allowStrangerView: true,
        showOnlineStatus: true,
        receiveNotification: true,
        isRealNameAuth: false
      }
    },
    onAvatarSelect(action) {
      this.showAvatarPicker = false
      if (action.value === 'camera') {
        // 调用相机
        this.openCamera()
      } else if (action.value === 'album') {
        // 打开相册
        this.openAlbum()
      }
    },
    openCamera() {
      // 模拟相机功能
      this.$toast('相机功能开发中...')
    },
    openAlbum() {
      // 模拟相册功能
      this.$toast('相册功能开发中...')
    },
    onGenderConfirm(value) {
      // 处理性别选择器的确认事件
      if (value && value.selectedOptions && value.selectedOptions.length > 0) {
        this.form.gender = value.selectedOptions[0].text || value.selectedOptions[0].value
      } else if (value && value.selectedValues && value.selectedValues.length > 0) {
        this.form.gender = value.selectedValues[0]
      } else if (typeof value === 'string') {
        this.form.gender = value
      }
      this.showGenderPicker = false
    },
    onDateConfirm(value) {
      this.form.birthday = value.toLocaleDateString()
      this.showDatePicker = false
    },
    goToChangePassword() {
      this.$router.push('/profile/change-password')
    },
    goToBindEmail() {
      this.$router.push('/profile/bind-email')
    },
    goToRealNameAuth() {
      this.$router.push('/profile/real-name-auth')
    },
    async saveProfile() {
      if (!this.form.nickname.trim()) {
        this.$toast('请输入昵称')
        return
      }
      
      try {
        this.$toast.loading('保存中...')
        
        // 模拟保存请求
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        this.$toast.success('保存成功')
        this.$router.go(-1)
      } catch (error) {
        this.$toast.fail('保存失败')
      }
    }
  }
}
</script>

<style scoped>
.profile-info {
  background: #f5f5f5;
  min-height: 100vh;
}

.form-container {
  background: white;
}

.avatar {
  border: 2px solid #eee;
}

.van-cell-group {
  margin-top: 10px;
}

.van-cell-group:first-child {
  margin-top: 0;
}
</style>